import React, { Component } from "react";
import PageTitle from "@/components/pageTitle";
import ClassComps from "@/components/ClassComps";
import StateFlush from "@/components/stateFlush";
import TouchDemo from "@/components/touchDemo";
import { DatePicker, Button } from "antd";

const Demo = function () {
  return (
    <>
      <div>
        <h1>Demo组件</h1>
        <PageTitle title="React-Props">
          <div slot="pageHeader">我是页眉</div>
          <div slot="pageContent">
            我是文章内容,一起来学习react的插槽机制吧~~~
          </div>
          <div slot="pageFooter">我是页脚</div>
        </PageTitle>
      </div>
      <div>
        <ClassComps></ClassComps>
        {/* 同步刷新state状态 */}
        <StateFlush></StateFlush>
      </div>
      <div>
        <h2>解决移动端300ms延迟</h2>
        <TouchDemo></TouchDemo>
      </div>
      <div>
        <h2>使用map遍历绑定合成事件</h2>
        <MapData></MapData>
        <Button type="primary">Antd按钮</Button>
      </div>
    </>
  );
};

class MapData extends Component {
  state = {
    arr: [
      {
        id: 1,
        name: "张三",
        age: 18,
      },
      {
        id: 2,
        name: "李四",
        age: 20,
      },
      {
        id: 3,
        name: "王五",
        age: 22,
      },
    ],
  };
  clickMe = (item) => {
    console.log(item);
  };
  render() {
    let { arr } = this.state;
    return (
      <>
        {arr.map((item) => {
          let { id, name, age } = item;
          return (
            <li key={id} onClick={() => this.clickMe(item)}>
              {name} - {age}
            </li>
          );
        })}

        <DatePicker />
      </>
    );
  }
}
/**
 * React本身就做了事件委托，而vue中要手动实现事件委托
 * 使用了箭头函数要注意onClick={this.clickMe(item)}这种写法，会导致函数立即执行
 * 所以还是要使用bind()方法，或者使用闭包
 *    <li key={id} onClick={this.clickMe.bind(this,item)}>
 *             {name} - {age}
 *    </li>
 * 闭包：onClick={() => this.clickMe(item)}
 */

export default Demo;
